<template>
  <div id="buMenList">
    <el-card class="box-card"  style="height: 100%;">
      <div slot="header" class="clearfix" style="text-align: right">
        <el-button size="medium" type="goon" round @click="nenghaoDialogFormVisibleAddcp = true" style="" v-has="'addmatter'">新增物质</el-button>
      </div>
      <div class="serverTable" v-has="'selecematter'">
        <el-table
          :data="tableData"
          border
          height="100%"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            min-width="60"
          >
          </el-table-column>
          <el-table-column
            prop="zhonglei"
            label="种类"
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="substance"
            label="物质名称"
            min-width="15%"
          >
          </el-table-column>
          <el-table-column
            prop="substanceUnit"
            label="物质单位"
            min-width="5%"
          >
          </el-table-column>
          <el-table-column
            prop="lowCalorific"
            label="平均低位发热量"
            min-width="8%"
          >
          </el-table-column>
          <el-table-column
            prop="lowCalorificUnit"
            label="低位发热量单位"
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="standardCoal"
            label="标煤低位发热量"
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="conversionCoefficient"
            label="折标系数"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            prop="conversionCoefficientUnit"
            label="折标系数单位"
            min-width="12%"
          >
          </el-table-column>

          <el-table-column
            label="操作"
            min-width="13%"
          >
            <template v-slot="scope">
              <el-tooltip effect="dark" content="修改物质" placement="top" :enterable="false" v-has="'addmatter'">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialog(scope.row.id)" ></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" content="删除物质" placement="top" :enterable="false" v-has="'addmatter'">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteMsg(scope.row.id)" ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog
      title="新增物质"
      :visible.sync="nenghaoDialogFormVisibleAddcp"
      :before-close="handleClose"
      @close="editdialogClose2"
      width="25%"
      center
    >
      <el-form ref="addWzFormRef" :model="addWzForm" label-width="140px" :rules="addFormRuleWz">
        <el-form-item label="种类" prop="parentId">
          <el-select v-model="addWzForm.parentId" filterable placeholder="请选择种类"  style="width: 98%"  >
            <el-option
              v-for="itemZl in zhongleiData"
              :key="itemZl.id"
              :label="itemZl.categoryName"
              :value="{value:itemZl.id,label:itemZl.categoryName}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物质名称" prop="substance">
          <el-input  v-model="addWzForm.substance" ></el-input>
        </el-form-item>
        <el-form-item label="物质单位" prop="substanceUnit">
          <el-select v-model="addWzForm.substanceUnit" filterable placeholder="请选择物质单位"  style="width: 98%" >
            <el-option
              v-for="item in wuzhiunitData"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平均低位发热量" prop="lowCalorific">
          <el-input  v-model="addWzForm.lowCalorific" ></el-input>
        </el-form-item>
        <el-form-item label="低位发热量单位" prop="lowCalorificUnit">
          <el-select v-model="addWzForm.lowCalorificUnit" filterable placeholder="请选择低位发热量单位"  style="width: 98%" >
            <el-option
              v-for="item in diweifareliangunitData"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="折标系数" prop="conversionCoefficient">
          <el-input  v-model="addWzForm.conversionCoefficient" ></el-input>
        </el-form-item>
        <el-form-item label="折标系数单位" prop="conversionCoefficientUnit">
          <el-select v-model="addWzForm.conversionCoefficientUnit" filterable placeholder="请选择折标系数单位"  style="width: 98%" >
            <el-option
              v-for="item in zhebianxishuData"
              :key="item.value"
              :label="item.label"
              :value="{value:item.value}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标煤低位发热量" prop="standardCoal">
          <el-input  v-model="addWzForm.standardCoal" :disabled="true" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button round type="goon" size="medium" @click="nenghaoDialogFormVisibleAddcp = false">取 消</el-button>
    <el-button round type="goon" size="medium"  @click="addWuzi" >确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="更新物质"
      :visible.sync="editdialogVisible"
      :before-close="handleClose"
      @close="editdialogClose"
      width="25%"
      center
    >
      <el-form ref="editFormRef" :model="editCpForm" label-width="140px" :rules="addFormRuleWz">
        <el-form-item label="种类" prop="parentId">
          <el-select v-model="editCpForm.parentId" filterable placeholder="请选择种类"  style="width: 98%"  >
            <el-option
              v-for="itemZl in zhongleiData"
              :key="itemZl.id"
              :label="itemZl.categoryName"
              :value="itemZl.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物质名称" prop="substance">
          <el-input  v-model="editCpForm.substance" ></el-input>
        </el-form-item>
        <el-form-item label="物质单位" prop="substanceUnit">
          <el-select v-model="editCpForm.substanceUnit" filterable placeholder="请选择物质单位"  style="width: 98%" >
            <el-option
              v-for="item in wuzhiunitData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平均低位发热量" prop="lowCalorific">
          <el-input  v-model="editCpForm.lowCalorific" ></el-input>
        </el-form-item>
        <el-form-item label="低位发热量单位" prop="lowCalorificUnit">
          <el-select v-model="editCpForm.lowCalorificUnit" filterable placeholder="请选择低位发热量单位"  style="width: 98%" >
            <el-option
              v-for="item in diweifareliangunitData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="折标系数" prop="conversionCoefficient">
          <el-input  v-model="editCpForm.conversionCoefficient" ></el-input>
        </el-form-item>
        <el-form-item label="折标系数单位" prop="conversionCoefficientUnit">
          <el-select v-model="editCpForm.conversionCoefficientUnit" filterable placeholder="请选择折标系数单位"  style="width: 98%" >
            <el-option
              v-for="item in zhebianxishuData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标煤低位发热量" prop="standardCoal">
          <el-input  v-model="editCpForm.standardCoal" :disabled="true" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
       <el-button round type="goon" size="medium" @click="editdialogVisible = false">取 消</el-button>
    <el-button round type="goon" size="medium"  @click="editpcInfo" >确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
  export default {
    name: 'mattermanage',
    data(){
      return{
        value:[],
        total:10,
        tableData:[],
        nenghaoDialogFormVisibleAddcp:false,
        addWzForm:{
          parentId:"",
          conversionCoefficient:'',
          conversionCoefficientUnit:'',
          lowCalorific:'',
          lowCalorificUnit:'',
          substance:"",
          substanceUnit:'',
          standardCoal:29271
        },
        wuzhiunitData:[{
          value: '千克',
          label: '千克'
        },{
          value: '立方米',
          label: '立方米'
        }],
        diweifareliangunitData:[{
          value: '千焦/千克',
          label: '千焦/千克'
        },{
          value: '千焦/立方米',
          label: '千焦/立方米'
        }],
        zhebianxishuData:[{
          value: '千克标煤/千克',
          label: '千克标煤/千克'
        },{
          value: '千克标煤/立方米',
          label: '千克标煤/立方米'
        }],
        zhongleiData:[],
        addFormRuleWz: {
          parentId: [{
            required: true,
            message: '请选择种类',
            trigger: 'blur'
          }],
          substance: [{
            required: true,
            message: '请输入物质名称',
            trigger: 'blur'
          }],
          conversionCoefficient: [{
            required: true,
            message: '请输入折标系数',
            trigger: 'blur'
          }],
          conversionCoefficientUnit: [{
            required: true,
            message: '请选择折标系数单位',
            trigger: 'blur'
          }],
          substanceUnit: [{
            required: true,
            message: '请选择物质单位',
            trigger: 'blur'
          }],
          standardCoal: [{
            required: true,
            message: '请输入标煤低位发热量',
            trigger: 'blur'
          }],
          lowCalorificUnit: [{
            required: true,
            message: '请选择低位发热量单位',
            trigger: 'blur'
          }],
          lowCalorific: [{
            required: true,
            message: '请输入平均低位发热量',
            trigger: 'blur'
          }],
        },
        editdialogVisible:false,
        editCpForm:{
        },
        zhibiaounitData:[{
          value: '克/千瓦时',
          label: '克/千瓦时'
        },{
          value: '千克/吉焦',
          label: '千克/吉焦'
        },{
          value: '千克/吨',
          label: '千克/吨'
        },{
          value: '千克/立方米',
          label: '千克/立方米'
        }],
        zhebiaoData:[{
          value: '1000',
          label: '1000'
        },{
          value: '1000000',
          label: '1000000'
        }],
      }
    },
    created () {
      this.getAllWuzhi();
    },
    methods:{
      async getAllWuzhi(){
        this.tableData=[]
        const {data:res}= await this.$http.get('/v1.0/resultIntegration/rule/substanceParam/findAll')
        if(res.status=='3000') {
          this.zhongleiData=res.data
          for (let i in res.data) {
            const {data:res2}= await this.$http.get('/v1.0/resultIntegration/rule/substanceParam/findAllByParentId/'+res.data[i].id)
            if(res2.status=='3000'){
              for(let j in res2.data){
                res2.data[j].zhonglei=res.data[i].categoryName
                this.tableData.push(res2.data[j])
              }
            }
          }
        }else{
          this.zhongleiData=[]
        }
      },
      async daleiChange(item){
        console.log(item)
        const {data:result}= await this.$http.get('/v1.0/resultIntegration/rule/twoHigh/findBySecondParentId/'+item.value)
        if(result.status=='3000'){
          this.zhongleiData=result.data
          this.zhongleiDisabled=false
        }else {
          this.zhongleiData=[]
        }
      },
      async addWuzi(){
        this.$refs.addWzFormRef.validate(async valid => {
          if (!valid)
            return
          this.addWzForm.lowCalorificUnit = this.addWzForm.lowCalorificUnit.value
          this.addWzForm.parentId = this.addWzForm.parentId.value
          this.addWzForm.conversionCoefficientUnit = this.addWzForm.conversionCoefficientUnit.value
          this.addWzForm.substanceUnit = this.addWzForm.substanceUnit.value
          console.log(this.addWzForm)
          const { data: res } = await this.$http.post('/v1.0/resultIntegration/rule/substanceParam/save', this.addWzForm);
          if (res.status == '6000') {
            this.$message.success('新增物质成功！')
            this.nenghaoDialogFormVisibleAddcp = false;
            this.getAllWuzhi();
          } else {
            this.$message.error('新增物质失败！' + res.message)
          }
        })
      },
      async editDialog(id){
        const {data:res}=await  this.$http.get('/v1.0/resultIntegration/rule/substanceParam/findById/'+id);
        if(res.status!=="3000"){
          return 0;
        }
        this.editCpForm=res.data;
      /*  if(this.editCpForm.parentId==1){
          this.editCpForm.parentId='耗能工质'
        }else if(this.editCpForm.parentId==2){
          this.editCpForm.parentId='各种能源'
        }else{
          this.editCpForm.parentId='电力和热力'
        }*/
        this.editdialogVisible = true
      },
      editdialogClose(){
        this.$refs.editFormRef.resetFields()
      },
      editpcInfo(){
        this.$refs.editFormRef.validate(async valid =>{
          if(!valid) return
          const {data:res}= await this.$http.put('/v1.0/resultIntegration/rule/substanceParam/update', this.editCpForm)
          if(res.status!=="6000"){
            return  this.$message.error('修改物质失败！')
          }
          this.$message.success('修改物质成功！');
          this.editdialogVisible = false;
          this.getAllWuzhi();
        })
      },
      async deleteMsg(id){
        const confirmResult = await this.$confirm('此操作将永久删除该物质, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((err) => {
          return err
        });
        if(confirmResult !== 'confirm'){
          return this.$message({
            type: 'info',
            message: '已取消删除'
          });
        }
        //请求
        const {data:res}= await this.$http.delete('/v1.0/resultIntegration/rule/substanceParam/delete/'+id)
        if(res.status!="4000"){
          return  this.$message.error('删除物质失败！')
        }
        this.$message.success('删除物质成功！');
        this.getAllWuzhi();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      editdialogClose2(){
        this.$refs.addCpFormRef.resetFields()
      },
    }
  }
</script>

<style scoped lang="less">
  #buMenList{
    position: absolute;
    left: 15.5%;
    top: 9.5%;
    bottom: 1.5%;
    width: 83.5%;
    /*background-color: #ffffff;*/
    border-radius: 8px;
    box-shadow: 0 0 5px #acc4fe;
  }
  ::v-deep .cell{
    text-align: center;
  }
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  .el-row{
    ::v-deep  .el-input__inner{
      border-radius: 45px;
    }

  }
  .clearfix{
    ::v-deep .el-button:focus, .el-button:hover {
      color: #fff;
      border-color: #c6e2ff;
      background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
    }
    ::v-deep .el-button--goon:active {
      color: #fff;
      border-color: #c6e2ff;
      outline: 0;
    }
  }

  /deep/ .el-input-group__append{
    border-radius: 45px;
  }
  /deep/ .el-dialog{
    border-radius: 8px;
  }
  /deep/ .el-dialog__header {
    //background: -webkit-linear-gradient(left, #3ee8c2, #25e4a3);

    border-radius: 8px 8px 0 0 ;
  }

  ::v-deep .el-button--goon:focus, .el-button--goon:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
  ::v-deep .el-dialog__title{
    font-weight: bold;
    font-size: 20px;
    color: #45524f;
  }
  .el-dialog__body{
    .el-form{
      .el-form-item {
        .el-form-item__content{
          .el-input{
            ::v-deep  .el-input__inner{
              border-radius: 45px;
            }
          }

        }
      }
    }
  }
  /deep/ .el-select .el-input__inner{
    border-radius: 45px;
  }

  ::v-deep .el-form-item__content{
    ::v-deep  .el-input__inner{
      border-radius: 45px;
    }
  }
  ::v-deep .el-form-item__label{
    color: #45524f;
  }
  .serverTable{
    position: absolute;
    width: 97%;
    padding: 0%;
    /*height: 100%;*/
    height: calc(100% - 140px);
  }
  /deep/ .cell{
    text-align: center;
  }
  /deep/ .el-table__empty-text{
    line-height:44px
  }
  /deep/ .el-table__empty-block{
    min-height: 44px;
  }
  /deep/ .el-table__body-wrapper {
    /*height: 200px; !* 滚动条整体高 必须项 *!*/
    border-right: none;
    overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/
  }
  /deep/ .el-dialog--center .el-dialog__body{
    padding: 10px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width:6px;/* 滚动条的宽高 必须项 */
    height: 5px;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #bfcbd9;/* 滚动条的宽 */
    border-radius: 3px;
  }
  /deep/ .el-input__inner{
    border-radius: 45px;
  }
</style>
